<template>
    <div class="box">
        <headers title="搜索"></headers>
        <div class="top">
            <van-search v-model="title" placeholder="请输入搜索关键词" />
            <van-icon name="list-switching" size="30" is-link @click="showPopup" />
        </div>
        <van-popup v-model:show="show" position="right" :style="{ width: '50%', height: '100%' }">
            <div>
                <p style="display: flex;align-items: center;height: 3rem;margin-left: 2rem;">筛选</p>
                <van-search v-model="title" placeholder="请输入搜索关键词" />
                <van-button type="primary" size="normal" style="margin: 2rem,1rem;">确定</van-button>
                <van-button type="success" size="normal" style="margin: 2rem,1rem;">取消</van-button>
            </div>
        </van-popup>
        <template v-if="!title">
            <div class="history">
                <p>历史搜索</p>
                <van-button color="linear-gradient(to right, #ff6034, #ee0a24)" v-for="(v, i) in his" :key="i"
                    @click="searchFun(v)">
                    {{ v }}
                </van-button>
                <p>热门搜索</p>
                <van-button color="linear-gradient(to right, #ff6034, #ee0a24)" v-for="(v, i) in remen" :key="i"
                    @click="searchFun(v)">
                    {{ v }}
                </van-button>
            </div>
        </template>

        <template v-else>
            <van-pull-refresh v-model="loading" @refresh="onRefresh">
                <div v-if="list.length > 0">
                    <van-card v-for="(v, i) in list" @click="todetail(v.goods_id)" :key="i" :num="v.goods_number"
                        :price="v.goods_price" :title="v.goods_name">
                        <template #thumb>
                            <lazy-component>
                                <img style="width: 6rem;height: 6rem;"
                                    v-lazy="v.goods_big_logo ? v.goods_big_logo : 'https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg'" />
                            </lazy-component>
                        </template>

                    </van-card>
                </div>
                <div v-else>
                    <van-empty description="暂无商品" />
                </div>

            </van-pull-refresh>

        </template>

    </div>
</template>

<script setup>
import { ref, watch } from "vue";
import { swiperdataApi, catitemsApi, categoriesApi, searchApi, detailApi } from "@/api/api";
import { useRoute, useRouter } from 'vue-router'

const router = useRouter()
const route = useRoute()

import headers from "@/components/headers.vue";

let title = ref(route.query.name);

const todetail = (goods_id) => {
    router.push({
        path: '/detail',
        query: { goods_id: goods_id }
    })
}

let his = ref(['小米', '电脑', '裙子']);
let remen = ref(['新能源汽车', '20K超清电视', '手机']);
//历史和热门的点击搜索
const searchFun = (v) => {
    title.value = v;
    getsearchApi();
}

let list = ref([]);
const getsearchApi = () => {
    searchApi(title.value).then((res) => {
        list.value = res.data.message.goods;
    })
}
getsearchApi();

//下拉刷新
import { showToast } from 'vant';
const loading = ref(false);
const onRefresh = () => {
    setTimeout(() => {
        showToast('刷新成功');
        loading.value = false;
        // count.value++;
        getsearchApi();
    }, 1000);
};

//引入鲁大师
//搜索防抖
import _ from "lodash";
// _.debounce(calculateLayout, 150)
watch(title, _.debounce((newValue, oldValue) => {
    getsearchApi();
}, 1000)
)

//抽屉
const show = ref(false);
const showPopup = () => {
    show.value = true;
};



</script>

<style lang="scss" scoped>
.box {
    width: 100%;
    height: 100%;
    overflow: auto;

    .history {
        width: 90%;
        margin: 1rem;

        .van-button {
            margin: 1rem 1rem;
        }
    }

    .top {
        display: flex;
        align-items: center;

        .van-search {
            flex: 1;
        }
    }
}
</style>